import React, { useCallback } from 'react';
import Taro from '@tarojs/taro';
import { Image, View, Text } from '@tarojs/components';
import Images from '@ASSET/Images'
import i18n from '@I18N'
import './index.scss'

const FollowCard = ({ containerClass }) => {
  const onPress = useCallback(() => {
    Taro.setClipboardData({ data: i18n.common.officialAccountId() })
    Taro.showToast({ icon: 'none', title: '复制成功' })
  }, [])

  return (
    <View className={`followCardContainer ${containerClass}`}>
      <View className="followCardTopTip">
        <Image src={Images.qrCode.yellow_eyes} className="followCardImage" />
        <Text>
          {i18n.officialAccount.followTips3()}
          “
        </Text>
        <Text className="followCardName">{i18n.common.appName()}</Text>
        <Text>”</Text>
      </View>
      <View className="followCardCopy">
        <Text className="followCardCopyIdText">{i18n.common.officialAccountId()}</Text>
        <View className="followCardCopyBtn" onClick={onPress}>
          <Text>{i18n.common.copy()}</Text>
        </View>
      </View>
      <Text className="followCardTips4">{i18n.officialAccount.followTips4()}</Text>
    </View>
  )
}

export default FollowCard
